import React, { useRef, useState } from 'react';
import type { FormInstance, FormProps } from 'antd';
import { Button, Form, Input, Select, message, Space } from 'antd';
import { useNavigate } from 'react-router-dom';

// 科室
const cityData = {
    Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
    Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};

type CityName = keyof typeof cityData;

const provinceData: CityName[] = ['Zhejiang', 'Jiangsu'];
// 科室

export default function DoctorEdit() {
    type FieldType = {
        username?: string;
        Select?: string;
        Fanga?: string;
        dqa?: string;
        dqb?: string;
        dqc?: string;
        aaaa?: string;
        aaab?: string;
    };

    // 使用 useRef 获取 Form 实例
    const formRef = useRef<FormInstance<FieldType>>(null);

    const [messageApi, contextHolder] = message.useMessage();
    let navi = useNavigate()
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        // console.log('Success:', values);
        if (values) {
            messageApi.open({
                type: 'success',
                content: 'This is a success message',
            });
            navi('/HospitalDetails')
        }
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        // console.log('Failed:', errorInfo);
    };


    // 清空表单数据
    const qing = () => {
        if (formRef.current) {
            formRef.current.resetFields();  // 重置所有字段
        }
    };

    // 科室
    const [cities, setCities] = useState(cityData[provinceData[0] as CityName]);
    const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0] as CityName);

    const handleProvinceChange = (value: CityName) => {
        setCities(cityData[value]);
        setSecondCity(cityData[value][0] as CityName);
    };

    const onSecondCityChange = (value: CityName) => {
        setSecondCity(value);
    };
    // 

    return (
        <div id='y-edits'>
            {/* 标题 */}
            <div className="header">
                {contextHolder}
                <span>编辑医生信息</span>
                <span style={{ fontSize: '12px', color: '#a0a0a0' }}><span style={{ color: '#ff706f' }}>*</span>为必填项</span>
            </div>
            {/* 身体 */}
            <div className="mation">
                <br />
                <div style={{
                    height: '25px', width: '75%', borderLeft: '8px solid #409eff', paddingLeft: '25px',
                    margin: '0 auto', color: '#409eff', fontWeight: 'bolder'
                }}>基本信息</div>
                <br />
                <div>
                    <Form
                        ref={formRef}  // 将 formRef 绑定到 Form 组件上
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="医生姓名"
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="选择职称"
                            name="Select"
                            rules={[{ required: true, message: 'Please input your Select!' }]}
                        >
                            <Select>
                                <Select.Option value="贺熊">贺熊</Select.Option>
                                <Select.Option value="子路">子路</Select.Option>
                                <Select.Option value="子轩">子轩</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="选择医院"
                            name="Fanga"
                            rules={[{ required: true, message: 'Please input your Select!' }]}
                        >
                            <Select>
                                <Select.Option value="贺熊">贺熊</Select.Option>
                                <Select.Option value="子路">子路</Select.Option>
                                <Select.Option value="子轩">子轩</Select.Option>
                            </Select>
                        </Form.Item>

                        <div style={{ marginLeft: '120px', height: '50px' }}>
                            <span style={{ color: '#ff6f71', fontSize: '18px' }}>*</span>选择科室：
                            <Space wrap>
                                <Select
                                    defaultValue={provinceData[0]}
                                    style={{ width: 180 }}
                                    onChange={handleProvinceChange}
                                    options={provinceData.map((province) => ({ label: province, value: province }))}
                                />
                                <Select
                                    style={{ width: 180 }}
                                    value={secondCity}
                                    onChange={onSecondCityChange}
                                    options={cities.map((city) => ({ label: city, value: city }))}
                                />
                            </Space>
                        </div>

                        <Form.Item
                            label="医生擅长"
                            name="aaab"
                        >
                            <Input.TextArea />
                        </Form.Item>

                        <Form.Item
                            label="医生简介"
                            name="aaab"
                        >
                            <Input.TextArea />
                        </Form.Item>

                        <Form.Item
                            label="权重"
                            name="Fanga"
                        >
                            <Input />
                        </Form.Item>

                        <div style={{ display: 'flex', paddingLeft: '230px' }}>
                            <Form.Item label={null}>
                                <Button htmlType="button" onClick={qing}>
                                    Reset
                                </Button>
                            </Form.Item>
                            <Form.Item label={null} style={{ paddingRight: '130px' }}>
                                <Button type="primary" htmlType="submit">
                                    Submit
                                </Button>
                            </Form.Item>
                        </div>
                    </Form>
                </div>
            </div>
        </div>
    );
}

